<template>
  <div>
    <el-dialog v-model="ShowPopUpdate" align-center draggable title="编辑菜单" width="60%">
      <!-- 弹出层  创建-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="父级菜单：">
          <el-tree-select
            v-model="UpdateData.parent_id"
            :data="MenuTreeSelect"
            :render-after-expand="false"
            check-strictly="true"
          />
        </el-form-item>
        <el-form-item label="菜单标题：">
          <el-input v-model="UpdateData.title" clearable placeholder="Approved by" />
        </el-form-item>
        <el-form-item label="名称Key：">
          <el-input v-model="UpdateData.name" clearable placeholder="输入英文名称" />
        </el-form-item>
        <el-form-item label="菜单路由：">
          <el-input v-model="UpdateData.path" clearable placeholder="Approved by" />
        </el-form-item>
        <el-form-item label="组件路径：">
          <el-input v-model="UpdateData.component" clearable placeholder="Vue组件路径" />
        </el-form-item>

        <el-form-item label="菜单图标：">
          <SelectIcon v-model:icon-value="UpdateData.icon" />

          <!--            <el-input v-model="UpdateData.icon" placeholder="Vue组件路径" clearable />-->
        </el-form-item>

        <el-form-item label="外链地址：">
          <el-input v-model="UpdateData.isLink" clearable placeholder="Vue组件路径" />
        </el-form-item>
        <el-form-item label="菜单排序：">
          <el-input v-model="UpdateData.sort" clearable placeholder="值越大越靠前" type="number" />
        </el-form-item>

        <el-form-item label="是否隐藏">
          <el-switch v-model="UpdateData.isHide" />
        </el-form-item>
        <el-form-item label="是否全屏">
          <el-switch v-model="UpdateData.isFull" />
        </el-form-item>
        <el-form-item label="是否固定">
          <el-switch v-model="UpdateData.isAffix" />
        </el-form-item>
        <el-form-item label="是否缓存">
          <el-switch v-model="UpdateData.isKeepAlive" />
        </el-form-item>
        <el-form-item label="按钮权限">
          <el-select
            v-model="currPermission"
            :reserve-keyword="false"
            allow-create
            filterable
            multiple
            placeholder="可手动输入自定义新增"
          >
            <el-option v-for="item in permissions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="flex justify-end">
        <el-form-item>
          <el-button type="primary" @click="SubmitUpdate">提交</el-button>
        </el-form-item>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { getAuthMenuSelectListApi, UpdateSysMenu } from "@/api/modules/menu";
import { ResultData } from "@/api/interface";
import { ElMessage, ElMessageBox, ElTooltip } from "element-plus";
import { RespOk } from "@/constant/codes";
import SelectIcon from "@/components/SelectIcon/index.vue";
import { dtoSysMenuUpdate } from "@/api/dbdto/dtoSysMenu";
import {
  BtnAuthCreate,
  BtnAuthDelete,
  BtnAuthIndex,
  BtnAuthSearch,
  BtnAuthUpdate,
  BtnPermissionArray
} from "@/constant/enums/btn_permission";
import { onMounted, ref } from "vue";

const ShowPop = (data: dtoSysMenuUpdate) => {
  ShowPopUpdate.value = true;
  if (data.permissions) {
    currPermission.value = data.permissions.split(",");
  }
  UpdateData.value = data as dtoSysMenuUpdate;
};

defineExpose({ ShowPop });
const emits = defineEmits(["ReloadData"]);
let currPermission = ref([BtnAuthIndex, BtnAuthSearch, BtnAuthCreate, BtnAuthUpdate, BtnAuthDelete]);
const permissions = ref(BtnPermissionArray);

let ShowPopUpdate = ref(false);
const UpdateData = ref<dtoSysMenuUpdate>({} as dtoSysMenuUpdate);

function SubmitUpdate() {
  if (typeof UpdateData.value.sort == "string") {
    UpdateData.value.sort = parseInt(UpdateData.value.sort);
  }
  UpdateData.value.permissions = currPermission.value.join(",");
  console.log(UpdateData.value, "UpdateData.value -- console.log");
  UpdateSysMenu(UpdateData.value).then((res: ResultData<any>) => {
    if (res.code == RespOk) {
      ShowPopUpdate.value = false;
      ShowPopUpdate.value = false;
      ElMessage({ type: "success", message: "修改完成" });
      emits("ReloadData");
    }
  });
}

//获取属性下拉选择框
onMounted(() => {
  GetSelectTreeMenu();
});

const MenuTreeSelect = ref<Menu.MenuSelectOptions[]>([]);
const GetSelectTreeMenu = () => {
  getAuthMenuSelectListApi().then((res: ResultData<Menu.MenuSelectOptions[]>) => {
    console.log(res, "-----res value");
    MenuTreeSelect.value = res.data;
  });
};
</script>

<style lang="scss" scoped></style>
